<template>
	<!-- refund申请退款 -->
	<view>
		<u-navbar title="申请退款" :autoBack="true" :placeholder="true" bgColor="#F8F9FE"></u-navbar>
		<view class="from card">


			<u--form :model="form" ref="uForm" :rules="rules" labelWidth="100">
				<view class="info">
					<text class="title">基本信息</text>
				</view>
				<!-- 订单编号 -->
				<view class="info">
					<u-form-item label="订单编号">
						<input type="text" disabled :value="orderNum" placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 联系人 -->
				<view class="info">
					<u-form-item label="姓名" prop="name">
						<input type="text" placeholder="姓名" v-model="form.name" placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 手机号 -->
				<view class="info">
					<u-form-item label="联系方式" prop="mobile">
						<input type="text" placeholder="联系方式" v-model="form.mobile" placeholder-class="class">
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="from card">
			<view class="from-row">
				<text class="title">补充描述</text>
			</view>
			<view class="from-row">
				<u--textarea v-model="form.message" placeholder="退款原因" autoHeight></u--textarea>
			</view>
			<ImgUpload @callback="imgCallback" />
		</view>
		<view class="fixedBox">
			<view class="fixedBox-item" @click="submit">
				提交申请
			</view>
		</view>
	</view>
</template>

<script>
	import ImgUpload from '../../components/ImgUpload/ImgUpload.vue'
	export default {
		data() {
			const mobile = (rule, value, callback) => {
				/^1[3-9]\d{9}$/.test(value) ? callback() : callback(new Error('请输入正确的手机号码'))
			}
			return {
				form: {
					name: '', //昵称
					mobile: '', //手机号
					message: "", //原因
					images: '', //图片
				},
				orderNum: "", //订单编号
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					mobile: [{
							type: 'string',
							max: 11,
							min: 11,
							required: true,
							message: '请输入正确手机号',

							trigger: ['blur', 'change']
						},
						{
							validator: mobile,
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
				}
			};
		},
		components: {
			ImgUpload
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			this.orderNum = option.orderNum
			this.form.id = option.id
			// console.log(option);
		},
		methods: {
			// 跳转
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			// 上传回调
			imgCallback(e) {
				// console.log(e);
				if (e.length) {
					this.form.images = e.map(item => item.url).join(',')
				}
			},
			// 提交
			submit() {
				// toUrl('/subPages/refundResult/refundResult')
				this.$refs.uForm.validate().then(res => {
					if (this.form.message !== "") this.refound()
					else uni.$u.toast('请补全信息')
				}).catch(errors => {
					uni.$u.toast('请补全信息')
				})
			},
			async refound() {
				let {
					code,
					msg
				} = await this.$api.refound(this.form)
				// console.log(res);
				uni.$u.toast(msg)
				if (code === 1) {
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					}, 1500)
				}
			}
		}
	}
</script>

<style>
	page {
		box-sizing: border-box;
		padding: 24rpx;
	}

	.u-border {
		border: none;
	}
</style>
<style lang="scss" scoped>
	.from {
		&-row {
			width: 100%;
			box-sizing: border-box;
			padding: 15rpx 0;
			color: rgba(0, 0, 0, 0.8);
			font-size: 28rpx;
			font-weight: 400;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.laber {
				width: 180rpx;
			}

			input {
				flex: 1;
			}

			.title {
				color: rgba(0, 0, 0, 0.8);
				font-size: 32rpx;
				font-weight: 500;
			}

		}
	}

	.fixedBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 188rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 16rpx 32rpx 0 32rpx;
		border-top: 1rpx solid rgba(195, 195, 195, 0.2);

		&-item {
			text-align: right;
			width: 100%;
			height: 80rpx;
			border-radius: 80rpx;
			background: linear-gradient(131.2deg, rgba(179, 142, 255, 1) 0%, rgba(130, 111, 255, 1) 100%);
			line-height: 80rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			font-weight: 600;
		}
	}

	.info {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 8rpx 0;

		input {
			flex: 1;
			color: rgba(0, 0, 0, 1);
		}

		.class {
			color: rgba(0, 0, 0, 1);
			font-size: 28rpx;
		}
	}
</style>
